<style scoped lang="scss">

.bigBox {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/login_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem; // 0.5rem * 0.5
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
   .box {
      width: 7.5rem; // 7.5rem * 0.5
      height: 3.4rem; // 3.4rem * 0.5
      margin-top: 100px; // 200px * 0.5
      border-radius: 3px; // 6px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      position: relative;
     .box-top {
        width: 86%;
        height: 30px; // 60px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 190px; // 380px * 0.5
          height: 80%;
          border: none;
          margin-left: 5px; // 10px * 0.5
        }
        input::placeholder {
          color: #b0acac;
        }
      }
     .box-bot {
        width: 86%;
        height: 30px; // 60px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 190px; // 380px * 0.5
          height: 80%;
          border: none;
          margin-left: 5px; // 10px * 0.5
        }
        input::placeholder {
          color: #b0acac;
        }
      }
    }
   .button {
      width: 100%;
      height: 50px; // 100px * 0.5
      margin-bottom: 50px; // 100px * 0.5
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 76%;
        height: 35px; // 70px * 0.5
        border: none;
        color: #3087ea;
        font-size: 13px; // 26px * 0.5
        border-radius: 3px; // 6px * 0.5
        background-color: #fff;
      }
    }
  }
  footer {
    width: 100%;
    height: 50px; // 100px * 0.5
  }
}
.yes {
  color: #fff;
  margin-top: 0.1rem; // 0.1rem * 0.5
  font-size: 0.6rem; // 0.6rem * 0.5
  font-weight: 500;
  margin-left: 0.4rem; // 0.8rem * 0.5
}
.mima {
  margin-right: 0.5rem; // 1rem * 0.5
}
.dadada {
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 400;
}
.box1 {
  width: 7rem; // 7rem * 0.5
  height: 0.2rem; // 0.2rem * 0.5
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  border-bottom-left-radius: 4px; // 8px * 0.5
  border-bottom-right-radius: 4px; // 8px * 0.5
  bottom: -5%; // -5% * 0.5
  z-index: 1;
}
.box2 {
  width: 6rem; // 6rem * 0.5
  height: 0.3rem; // 0.3rem * 0.5
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  border-bottom-left-radius: 4px; // 8px * 0.5
  border-bottom-right-radius: 4px; // 8px * 0.5
  bottom: -9%; // -9% * 0.5
}
.yzm {
  font-size: 0.15rem; // 0.3rem * 0.5
  color: #ccc;
}
.box-bot {
  border-bottom: 0.3rem; // 0.6rem * 0.5
}

</style>

<template>
  <div class="bigBox">
    <header>
      <div>
        <el-icon class="yes" @click="onClickLeft"><Back /></el-icon>
      </div>
      <div class="mima"><p style="color: #fff" class="dadada">设置新密码</p></div>
      <div style="padding-right: 20px"></div>
    </header>
    <main>
      <div class="box">
        <div class="box-top">
          <input v-model="values.pwd1" type="password" placeholder="请设置新密码" />
          <van-icon style="font-size: 30px" name="closed-eye" />
        </div>
        <div class="box-bot">
          <input v-model="values.pwd2" type="password" placeholder="请再次确认密码" />
          <van-icon style="font-size: 30px; color: #000;" name="closed-eye" />
        </div>
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
      <div class="button">
        <button @click="change">完成</button>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant';
import { ElMessage } from 'element-plus';

const router = useRouter()
const values = ref({
  pwd1: '',
  pwd2: '',
})

const onClickLeft = () => history.back()

const change = () => {
  if (values.value.pwd1 === values.value.pwd2) {
    ElMessage({
          message: '修改成功',
          type: 'success',
        })
    router.push('/login')
  } else {
    ElMessage({
          message: '两次密码不一致',
          type: 'error',
        })
  }
}
</script>
